<template>
  <div class="u-login">
    <el-form class="loginContainer" :rules="userRules" ref="formRulesRef" :model="user">
      <!-- <h4>基于Vue&Springboot&Tensorflow框架的音视频会议系统</h4> -->
      <h3 class="loginTitle">食品库存管理系统</h3>

      <el-form-item prop="adminUsername">
        <el-input
            :prefix-icon="UserOutlined"
            v-model="user.adminUsername"
            @keyup.enter="login"
            placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item prop="adminPassword">
        <el-input
            :prefix-icon="LockOutlined"
            v-model="user.adminPassword"
            @keyup.enter="login"
            placeholder="请输入密码"
            show-password
        />
      </el-form-item>

      <div>
        <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
      </div>

    </el-form>

  </div>

</template>

<script setup>
import {UserOutlined, LockOutlined} from "@ant-design/icons-vue";

import {reactive, ref} from "vue";
import axios from "@/request/axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const formRulesRef = ref("");
const user = reactive({
  adminUsername: "",
  adminPassword: "",
});

const userRules = reactive({
  adminUsername: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  adminPassword: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});

var timer = null;

const login = async () => {
  clearTimeout(timer);
  timer = setTimeout(async function () {
    const {data} = await axios.post("/api/admin/login", user)
    if (data.code === 200) {
      ElMessage.success("登录成功");
      window.localStorage.setItem("adminlogin", JSON.stringify(data.data));
      await router.replace({name: "home"})
    }
  }, 500); // 0.5秒内只允许点击一次

}

</script>


<style>
.loginContainer {
  background-clip: padding-box;
  margin: 20vh auto;
  width: 300px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  text-align: center;
  margin: 8px auto 30px auto;
}

</style>
